jQuery to Vanilla JavaScript Transition Cheat Sheet — Wait for Document Load, Classes, and HTTP Requests

Vanilla JavaScript in the browser now has many of the features of jQuery built-in.

Therefore, we don’t need to use jQuery to do many things.

In this article, we’ll look at the vanilla JavaScript equivalent of jQuery features.

Wait for Document to be Ready

With jQuery, we can use the $(document).ready callback to run code when the DOM is loaded:

$(document).ready(() => {  
  //...  
});

To do the same thing with vanilla JavaScript, we can listen to the DOMContentLoaded event on the document :

document.addEventListener("DOMContentLoaded", () => {  
  //...  
});

Working with Classes

jQuery has methods to let us add, remove or toggle classes of an element:

$("div").addClass("focus");  
$("div").removeClass("focus");  
$("div").toggleClass("focus");

addClass lets us add the focus class to the div.

removeClass lets us remove the focus class to the div.

toggleClass lets us toggle the focus class to the div.

To do the same thing with vanilla JavaScript, we can use the methods in the classList property of an element.

For instance, we can write:

const div = document.querySelector("div");  
div.classList.add("focus");  
div.classList.remove("focus");  
div.classList.toggle("focus");

classList.add adds the focus class.

classList.remove removes the focus class.

And classList.toggle toggles the focus class.

We can also add or remove multiple classes with:

const div = document.querySelector("div");  
div.classList.add("focus", "highlighted");  
div.classList.remove("focus", "highlighted");

classList.add adds the focus and highlighted classes.

classList.remove removes the focus and highlighted classes.

We can also use the classList.replace method to replace one class with another.

For instance, we can write:

document.querySelector("div").classList.replace("focus", "blurred");

The focus class is replaced with the blurred class with classList.replace .

Checking if an Element has a Class

jQuery comes with the hasClass method to check if an element has the given class.

For instance, we can write:

if ($("div").hasClass("focus")) {  
  //...  
}

To do the same thing with vanilla JavaScript, we can use the classList.contains method:

if (document.querySelector("div").classList.contains("focus")) {  
  //...  
}

Network Requests

jQuery comes with the get method to make GET requests.

It also comes with the ajax method to let us make any requests.

For instance, we can use ajax by writing:

$.ajax({  
  url: "https://yesno.wtf/api"  
}).done((data) => {  
  console.log(data)  
}).fail(() => {  
  // Handle error  
});

And we can use get by writing:

$.get({  
  url: "https://yesno.wtf/api"  
}).done((data) => {  
  console.log(data)  
}).fail(() => {  
  // Handle error  
});

With vanilla JavaScript, we can just use the fetch method:

(async () => {  
  try {  
    const res = await fetch('https://yesno.wtf/api')  
    const data = await res.json()  
    console.log(data)  
  } catch (error) {  
    console.log(error)  
  }  
})()

We call res.json to turn the JSON response data object into a JavaScript object.

fetch returns a promise which is more convenient than using done and fail callbacks.

Conclusion

We can use vanilla JavaScript to wait for the DOM to be ready, make HTTP requests, and manipulate element classes easily.